<template>
  <!-- logo 管理员 -->
  <div class="bookcenterTop">
    <el-card>
      <!-- 左边 -->
      <div class="left">
        <!-- LOGO -->
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-shuji"></use>
        </svg>
        <span>大众图书管理</span>
      </div>
      <!-- 右边 -->
      <div class="right">
        <!-- 下拉框 -->
        <el-dropdown>
          <span class="el-dropdown-link">
            管理员
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-xiangxia"></use>
            </svg>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item
                ><el-button @click="dialogFormVisible = true"
                  >修改密码
                </el-button>
              </el-dropdown-item>
              <el-dropdown-item @click="logout"
                ><el-button>退出登录</el-button></el-dropdown-item
              >
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </el-card>
  </div>
  <!-- 修改密码 弹出框 show-close加冒号才能生效-->
  <el-dialog
    v-model="dialogFormVisible"
    title="修改密码"
    width="30%"
    center
    draggable
    :show-close="false"
  >
    <el-form :model="form">
      <el-form-item label="用户名 :">
        <el-input placeholder="admin" disabled></el-input>
      </el-form-item>
      <el-form-item label="旧密码 :">
        <el-input v-model="form.oldpsw" type="password" />
      </el-form-item>
      <el-form-item label="新密码 :">
        <el-input
          v-model="form.newpsw"
          type="password"
          @keydown.enter="updatePassword"
        />
      </el-form-item>
    </el-form>
    <!-- 确认取消按钮 -->
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="clearIpt">取消</el-button>
        <el-button type="primary" @click="updatePassword">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { logoutInfo, updatepswInfo } from "@/api/API";
import { reactive, toRefs, computed, onMounted } from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
//消息提示
import { ElMessage } from "element-plus";

export default {
  setup(props) {
    //vuex
    let { state, commit } = useStore();

    //router
    let { push } = useRouter();

    //数据
    let data = reactive({
      dialogFormVisible: false,
      form: {
        oldpsw: "",
        newpsw: "",
      },
      id: computed(() => state.id).value,
    });

    //方法 通知 vuex 退出登录
    async function logout() {
      let result = await logoutInfo(computed(() => state.id).value);
      if (result.status == "success") {
        //清除数据
        sessionStorage.removeItem("TOKEN");
        sessionStorage.removeItem("ID");
        commit("DELETELOGINSTATE");
        //退出成功提示
        ElMessage({
          message: "退出成功",
          type: "success",
        });
        //路由跳转
        push("/login");
      }
    }

    //方法  弹窗 确认修改密码  发请求
    async function updatePassword() {
      //发请求
      if (data.form.oldpsw && data.form.newpsw) {
        let result = await updatepswInfo({
          id: data.id,
          oldpsw: data.form.oldpsw,
          newpsw: data.form.newpsw,
        });
        if (result.status == "success") {
          //修改成功提示
          ElMessage({
            message: result.message,
            type: "success",
          });
          // 弹窗关闭
          data.dialogFormVisible = false;
          //清除数据
          sessionStorage.removeItem("TOKEN");
          sessionStorage.removeItem("ID");
          commit("DELETELOGINSTATE");
          // 路由跳转
          push("/login");
        }
      } else {
        //提示
        ElMessage({
          message: "密码不能为空",
          type: "info",
        });
      }
    }

    //方法 取消按钮清空表单数据
    function clearIpt() {
      // 弹窗关闭
      data.dialogFormVisible = false;
      data.form = {};
    }

    return {
      logout,
      ...toRefs(data),
      updatePassword,
      clearIpt,
    };
  },
};
</script>

<style lang="less" scoped>
.bookcenterTop {
  .left {
    float: left;
    display: flex;
    align-items: center;
    span {
      font-family: "方正舒体";
      font-weight: 700;
      font-size: 30px;
    }
    .icon {
      margin-bottom: 10px;
      width: 70px;
      height: 70px;
    }
  }
  .right {
    float: right;
    margin: 30px 30px 0 0;
    .icon {
      vertical-align: middle;
      margin-left: -5px;
      width: 15px;
      height: 15px;
    }
  }
}
/* 退出修改 */
.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}

.el-input {
  width: 300px;
}
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>